<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>监听器</title>
	</head>
	<body>
		<div id = "app">
		   请输入要计算斐波那契数列的第几个数：
			<input type="text" v-model="num">
			<p v-show="result">{{result}}</p>
		</div>
	
		<script src="https://unpkg.com/vue@next"></script>
		<script>
			const vm = Vue.createApp({
    		    data() {
    		        return {
    		            num: 0,
    		            result: ''
    		        }
    		    },
				watch: {
				    num(val) {
    				  	this.result = "请稍候...";
    				  	if(val > 0){
    				    	const worker = new Worker("fibonacci.js");
    				    	worker.onmessage = (event) => this.result = event.data;
    						worker.postMessage(val);
    					}
    					else{
    						this.result = '';
    					}
				    }
				}
			}).mount('#app');
		</script>
	</body>
</html>